<template>
    <div ref="home" class="home">
        <div ref="side" class="side-bar">
            <Tree-view></Tree-view>
        </div>
        <div class="continer">
            <router-view></router-view>
        </div>
    </div>
</template>

<script>
    import TreeView from "./TreeView";
    export default {
        components: {
            TreeView
        },
        mounted: function () {
            //this.$refs.home.style.height = document.body.offsetHeight - 60 + "px";
            this.$refs.side.style.height = document.documentElement.clientHeight  - 45 + "px";
            //console.log(document.body.offsetHeight);
        },
        name: "Home"
    };
</script>

<style scoped>
    .home {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap; /* 不换行 */
        justify-content: space-between;
        align-items: stretch;

    }
    .side-bar {
        width: 18%;
        overflow-y: auto;
        overflow-x: hidden;
        font-size: 14px;
        position: relative;
        top: 0px;
        left: 0;
        background: #F5F5F5;
        border-right: #CCCCCC 1px solid;
    }
    .continer {
        width: 82%;
        background: white;
    }
</style>
